<template>
	<view class="container"
		style="background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQciab3VavwibyfELOIh1GjJkAwH1JEJ1BN5nibhzK013KuSB7MVq2yIu4w/640?wx_fmt=jpeg&from=appmsg');">
		<backbtn />
		<uni-transition mode-class='slide-left' :show="scene === 0">
			<div class="center" style="height: 100vh;width: 100vw;">
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQCicOltOzSwzz7o6iawu4wwBNGibM3cZvvglxdvFlBDkAOsOYmtZherCoQ/640?wx_fmt=png&from=appmsg"
					class="lipao animated infinite flash" style="animation-duration: 6s;" />
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQpKyUHj7KD9BUicnlPQLPjJSlKv5Q8ib3Swl4KGD4Ria6nsGenRJPCzQeg/640?wx_fmt=png&from=appmsg"
					class="train animated infinite fadeInRight" style="animation-duration: 6s;" />
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQiahCORqyowAbWnpwhZXicnOqru2icbMLN8kKR6Wjz3yibyY1mAj9YesZPA/640?wx_fmt=png&from=appmsg"
					class="flower animated infinite" style="animation-duration: 6s;" />
			</div>
		</uni-transition>
		<div class="center" style="height: 70vh;width: 100vw;">
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQbsx6aT5F4huwaEOC3hvS0wdP5xb6xh3EgpANrRxiaOEyknZAg49648Q/640?wx_fmt=png&from=appmsg"
				class="qiqiu animated infinite wobble" style="animation-duration: 6s;" />
			<music :music="musicSrc" />
			<z-swiper v-model="list" :options="optionsAutoplay">
				<z-swiper-item :custom-style="{width:'500rpx'}" v-for="(item,index) in list" :key="index">
					<img :src="item" alt="" mode="widthFix" @click="previewImage(item)">
				</z-swiper-item>
			</z-swiper>
		</div>
		<div class="foreground" :style="{backgroundImage:'url('+foreground+')'}">
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQW3O9iaMg2w5q7SgUvxPsc7HsmAz8iaYrT7Y20FfzHjIiaOCkvlVAXVSTw/640?wx_fmt=png&from=appmsg"
				class="xiaoji animated infinite tada" style="animation-duration: 6s;" />
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQFcqHmrx0MTtkI5TPgz42ZSdd5bHbLW80ArLRa0xSib9mDQP1icQLCsdw/640?wx_fmt=png&from=appmsg"
				class="girl animated infinite wobble" style="animation-duration: 4s;" />
		</div>
		<footerPart :detail='detail' />
	</view>
</template>
<script>
	import temp from './temp.json'
	import backbtn from '@/components/backbtn.vue'
	import music from '@/components/music.vue'
	import footerPart from '@/components/footer.vue'
	export default {
		name: 'album',
		components: {
			backbtn,
			music,
			footerPart
		},
		data() {
			return {
				show: false,
				detail: {},
				index: 0,
				scene: 0, //0 is default 1 is show picture
				backthumb: '',
				foreground: '',
				isplaying: true,
				musicSrc: 'https://res.wx.qq.com/voice/getvoice?mediaid=MzI1OTc4MjU2OF8xMDAwMDUwODM=',
				optionsAutoplay: {
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					speed: 1000,
					coverflowEffect: {
						rotate: 50,
						stretch: 20,
						depth: 100,
						modifier: 1,
						slideShadows: true,
					},
					autoplay: true
				},
				list: [],
				ano: '',
				options: {},
				detail: {},
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(options) {
			const that = this;
			this.getalbum(options);
			this.options = options;
			setTimeout(() => {
				that.scene = 1;
			}, 5000);
		},
		methods: {
			getalbum(options) {
				const that = this;
				const data = {
					'templateid': options.templateid,
					'appid': this.$apis.appId,
					'showano': options.showano, //
					'ano': options.ano
				};
				this.$apis.getalbum(data).then(res => {
					that.list = res.ablums;
					that.detail = res;
					that.detail.type = 'child';
					wx.hideLoading();
				})
			},
			previewImage(url) {
				// 使用uni的预览图片接口
				uni.previewImage({
					current: 0, // 当前显示图片索引
					urls: [url], // 需要预览的图片http链接列表
				});
			},
		},
		onShareAppMessage: function() {
			console.log('detail', this.detail);
			let title = decodeURIComponent(this.detail.title);
			const sharepath =
				'/pages/album/' + this.detail.type +
				'?templateid=' + this.detail.templateid +
				'&showano=' + this.options.showano +
				'&ano=' + this.detail.ano;
			console.log('sharepath', sharepath);
			return {
				title: '快乐童年相册',
				path: sharepath,
				imageUrl: this.detail.ablums[0],
				success: function(res) {
					// 转发成功
				},
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/animate.min.css";
	@import "album.scss"
</style>